<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户中心 - 我的账户</title>
    <link rel="stylesheet" type="text/css" href="./css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="./css/top-nav-optimized.css"/>
    <!-- 引入图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.8;
            color: #333;
            background-color: #f5f7fa;
            min-height: 100vh;
        }

        /* 【恢复原有导航栏样式】仅保留您最初定义的导航栏基础样式，不做任何新增修改 */
        .nav-logo i {
            color: #3498db;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 25px;
        }

        .nav-links li a {
            color: white;
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 500;
            padding: 5px 0;
            position: relative;
            transition: color 0.3s ease;
        }

        .nav-links li a:hover {
            color: #3498db;
        }

        .nav-links li a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #3498db;
            transition: width 0.3s ease;
        }

        .nav-links li a:hover::after {
            width: 100%;
        }

        .user-menu {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .user-menu .icon-btn {
            background: none;
            border: none;
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .user-menu .icon-btn:hover {
            color: #3498db;
        }

        /* 主内容区样式 */
        .container {
            max-width: 1200px;
            margin: 30px auto;
            padding: 0 20px;
        }

        .page-title {
            color: #2c3e50;
            margin: 20px 0 30px;
            font-size: 1.8rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #e1e5eb;
            padding-bottom: 15px;
        }

        .page-title i {
            color: #ff6700;
            margin-right: 10px;
            font-size: 1.5rem;
        }

        /* 用户信息卡片容器 */
        .user-dashboard {
            display: grid;
            grid-template-columns: 1fr 3fr;
            gap: 25px;
            margin-bottom: 30px;
        }

        /* 用户头像区域 */
        .user-avatar-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 25px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .avatar-container {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            overflow: hidden;
            border: 4px solid #f5f5f5;
            margin-bottom: 15px;
            position: relative;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .avatar-container:hover {
            transform: scale(1.05);
        }

        .avatar-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .avatar-upload {
            position: absolute;
            bottom: 0;
            right: 0;
            background: #ff6700;
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }

        .user-level {
            background: #fff3e0;
            color: #ff8a00;
            font-size: 12px;
            padding: 3px 10px;
            border-radius: 20px;
            margin-bottom: 10px;
        }

        /* 用户信息主卡片 */
        .user-info-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 30px;
        }

        .card-title {
            font-size: 1.3rem;
            color: #2c3e50;
            margin-bottom: 25px;
            padding-bottom: 10px;
            border-bottom: 1px solid #f0f2f5;
            font-weight: 600;
        }

        /* 信息项布局 */
        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .info-item {
            margin-bottom: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .info-label {
            display: flex;
            align-items: center;
            font-weight: 500;
            color: #666;
            font-size: 0.95rem;
        }

        .info-label i {
            color: #999;
            margin-right: 8px;
            width: 18px;
            text-align: center;
        }

        /* 信息展示样式 */
        .info-value {
            padding: 12px 15px;
            background-color: #f9fafb;
            border-radius: 8px;
            font-size: 1rem;
            color: #333;
            border: 1px solid #f0f2f5;
            transition: all 0.2s ease;
        }

        .info-value:hover {
            background-color: #f0f7ff;
            border-color: #e6f7ff;
        }

        /* 余额信息突出显示 */
        #balance {
            font-size: 1.2rem;
            font-weight: 600;
            color: #e63946;
            background-color: #fff5f5;
            border-color: #ffe3e3;
        }

        /* 输入框美化 */
        .edit-input {
            font-size: 1rem;
            padding: 12px 15px;
            background-color: white;
            border: 1px solid #ff6700;
            border-radius: 8px;
            box-shadow: 0 0 0 2px rgba(255, 103, 0, 0.1);
            margin-bottom: 0;
            display: none; /* 初始隐藏 */
            transition: all 0.3s ease;
        }

        .edit-input:focus {
            outline: none;
            border-color: #ff8a00;
            box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.2);
        }

        .user-info input:disabled {
            background-color: #f9fafb;
            cursor: not-allowed;
            border-color: #f0f2f5;
            box-shadow: none;
        }

        /* 功能区块 */
        .feature-section {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 30px;
            margin-bottom: 30px;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
        }

        .feature-card {
            border: 1px solid #f0f2f5;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            border-color: #ff6700;
        }

        .feature-icon {
            font-size: 2rem;
            color: #ff6700;
            margin-bottom: 10px;
        }

        .feature-name {
            font-weight: 500;
            color: #333;
        }

        /* 按钮组样式 */
        .button-group {
            margin: 20px 0 0;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }

        .action-button {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.95rem;
            font-weight: 500;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .action-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .action-button:active {
            transform: translateY(0);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        /* 按钮颜色区分 */
        .primary-btn {
            background-color: #ff6700;
            color: white;
        }

        .primary-btn:hover {
            background-color: #e05a00;
        }

        .secondary-btn {
            background-color: #f5f5f5;
            color: #333;
        }

        .secondary-btn:hover {
            background-color: #eeeeee;
        }

        .success-btn {
            background-color: #4caf50;
            color: white;
        }

        .success-btn:hover {
            background-color: #3d9140;
        }

        .purple-btn {
            background-color: #7b61ff;
            color: white;
        }

        .purple-btn:hover {
            background-color: #6a52e6;
        }

        /* 响应式设计优化 */
        @media (max-width: 768px) {
            .nav-links {
                display: none; /* 保持原有逻辑：移动设备隐藏导航链接 */
            }

            .user-dashboard {
                grid-template-columns: 1fr;
            }

            .info-grid {
                grid-template-columns: 1fr;
            }

            .feature-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .user-info-card, .feature-section {
                padding: 20px;
            }

            .page-title {
                font-size: 1.5rem;
            }

            .action-button {
                width: 100%;
                padding: 12px;
            }
        }
    </style>
</head>
<!-- 【恢复原有导航栏结构】完全保留您最初的<top>组件容器，不添加任何额外内容 -->
<div id="app">
    <top></top>
</div>
<body>


<div class="container">
    <h1 class="page-title"><i class="fas fa-user-circle"></i>用户中心</h1>

    <div class="user-dashboard">
        <!-- 用户头像区域 -->
        <div class="user-avatar-card">
            <div class="avatar-container">
                <img src="https://img.yzcdn.cn/vant/user-inactive.png" alt="用户头像">
                <div class="avatar-upload">
                    <i class="fas fa-camera"></i>
                </div>
            </div>
            <h3 id="username-display">张三</h3>
            <div class="user-level">普通会员</div>
            <p style="font-size: 0.9rem; color: #666; margin-top: 5px;">账号状态：正常</p>
        </div>

        <!-- 用户信息主卡片 -->
        <div class="user-info-card">
            <div class="card-title">基本信息</div>

            <div class="info-grid">
                <!-- 姓名信息 -->
                <div class="info-item">
                    <div class="info-label"><i class="fas fa-user"></i>姓名:</div>
                    <div class="info-value" id="username">张三</div>
                    <input type="text" id="username-input" class="edit-input" placeholder="请输入姓名" />
                </div>

                <!-- 电话信息 -->
                <div class="info-item">
                    <div class="info-label"><i class="fas fa-phone"></i>电话号码:</div>
                    <div class="info-value" id="phone">12345678901</div>
                    <input type="text" id="phone-input" class="edit-input" placeholder="请输入手机号" />
                </div>

                <!-- 余额信息 -->
                <div class="info-item">
                    <div class="info-label"><i class="fas fa-wallet"></i>账户余额:</div>
                    <div class="info-value" id="balance">100.00 元</div>
                </div>

                <!-- 默认收货地址 -->
                <div class="info-item">
                    <div class="info-label"><i class="fas fa-map-marker-alt"></i>默认收货地址:</div>
                    <div class="info-value" id="defaultAddress">
                        <div>加载中...</div>
                    </div>
                </div>
            </div>

            <!-- 功能按钮组 -->
            <div class="button-group">
                <button class="action-button primary-btn" onclick="toggleEdit()">
                    <i class="fas fa-edit"></i>修改信息
                </button>
                <button class="action-button purple-btn" onclick="viewAddress()">
                    <i class="fas fa-map-marker-alt"></i>收货地址管理
                </button>
                <a href="./myOrder.html">
                <button class="action-button secondary-btn" onclick="viewOrder()">
                    <i class="fas fa-shopping-cart"></i>我的订单
                </button></a>
                <button class="action-button success-btn" onclick="rechargeBalance()">
                    <i class="fas fa-money-bill-wave"></i>充值余额
                </button>
            </div>
        </div>
    </div>

    <!-- 功能区块 -->
    <div class="feature-section">
        <div class="card-title">我的服务</div>
        <div class="feature-grid">
            <div class="feature-card" onclick="viewOrder()">
                <div class="feature-icon"><i class="fas fa-box"></i></div>
                <div class="feature-name">我的订单</div>
            </div>
            <div class="feature-card" onclick="viewAddress()">
                <div class="feature-icon"><i class="fas fa-map"></i></div>
                <div class="feature-name">地址管理</div>
            </div>
            <div class="feature-card" onclick="rechargeBalance()">
                <div class="feature-icon"><i class="fas fa-credit-card"></i></div>
                <div class="feature-name">余额充值</div>
            </div>
            <div class="feature-card">
                <div class="feature-icon"><i class="fas fa-heart"></i></div>
                <div class="feature-name">我的收藏</div>
            </div>
            <div class="feature-card">
                <div class="feature-icon"><i class="fas fa-star"></i></div>
                <div class="feature-name">我的评价</div>
            </div>
            <div class="feature-card">
                <div class="feature-icon"><i class="fas fa-cog"></i></div>
                <div class="feature-name">账户设置</div>
            </div>
        </div>
    </div>
</div>

<script>
    // 查看收货地址（原有逻辑不变）
    function viewAddress() {
        window.location.href = "./address.html";
    }

    function viewOrder() {
        window.location.href = "./myOrder.html";
    }

    // 充值余额（原有逻辑不变）
    function rechargeBalance() {
        const rechargeAmount = prompt("请输入充值金额:", "50");

        // 用户取消输入
        if (rechargeAmount === null) {
            return;
        }

        // 验证输入有效性
        const amount = parseInt(rechargeAmount, 10);
        if (isNaN(amount) || amount <= 0) {
            alert("请输入有效的充值金额（正整数）");
            return;
        }

        // 调用后端充值接口
        axios.put('http://localhost:8080/users/Balance', null, {
            params: {
                value: amount
            }
        })
            .then(response => {
                alert(`充值成功！\n充值金额: ${amount}元`);
                // 重新获取用户数据，更新余额显示
                fetchUserData();
            })
            .catch(error => {
                console.error('充值请求失败:', error);
                alert('充值失败，请稍后重试。');
            });
    }

    // 修改信息（原有逻辑不变）
    let isEditing = false;
    function toggleEdit() {
        const usernameValue = document.getElementById('username');
        const phoneValue = document.getElementById('phone');
        const usernameInput = document.getElementById('username-input');
        const phoneInput = document.getElementById('phone-input');

        if (!isEditing) {
            // 显示输入框并填充当前值
            usernameInput.value = usernameValue.textContent;
            phoneInput.value = phoneValue.textContent;
            usernameInput.style.display = "block";
            phoneInput.style.display = "block";
            usernameValue.style.display = "none";
            phoneValue.style.display = "none";
            isEditing = true;
        } else {
            // 隐藏输入框并提交修改
            const newUsername = usernameInput.value;
            const newPhone = phoneInput.value;

            // 接口请求逻辑（原有不变）
            axios.put('http://localhost:8080/users/message', {
                username: newUsername,
                phone: newPhone
            })
                .then(response => {
                    alert('用户信息修改成功！');
                    fetchUserData();
                })
                .catch(error => {
                    console.error('修改用户信息失败:', error);
                    alert('修改用户信息失败，请稍后重试。');
                });

            usernameInput.style.display = "none";
            phoneInput.style.display = "none";
            usernameValue.style.display = "block";
            phoneValue.style.display = "block";
            isEditing = false;
        }
    }

    // 从后端获取用户数据（原有逻辑不变）
    function fetchUserData() {
        console.log("开始获取用户数据...");
        axios.get('http://localhost:8080/users/message')
            .then(function (response) {
                console.log("收到响应:", response);
                if (response && response.data) {
                    const userData = response.data;
                    console.log("用户数据:", userData);
                    document.getElementById('username').textContent = userData.username;
                    document.getElementById('username-display').textContent = userData.username;
                    document.getElementById('phone').textContent = userData.phone;
                    document.getElementById('balance').textContent = userData.balance.toFixed(2) + " 元";
                } else {
                    console.error('返回的数据格式不正确:', response.data);
                    alert('获取用户数据失败，数据格式不正确。');
                }
            })
            .catch(function (error) {
                console.error('获取用户数据失败:', error);
                alert('请先登录！');
            });
    }
    // 获取默认收货地址
    function fetchDefaultAddress() {
        axios.get('http://localhost:8080/addresses/defaultAddress')
            .then(response => {
                const address = response.data;
                const addressElement = document.getElementById('defaultAddress');

                if (address) {
                    // 拼接地址信息
                    addressElement.innerHTML = `联系人：${address.contact}<br>
                                    省：${address.province} 市：${address.city} 区/镇：${address.town} 详细地址：${address.street}`;
                } else {
                    addressElement.innerHTML = '<div style="color:#666;">暂无默认收货地址</div>';
                }
            })
            .catch(error => {
                console.error('获取默认地址失败:', error);
                document.getElementById('defaultAddress').innerHTML =
                    '<div style="color:#e53e3e;">获取地址失败，请重试</div>';
            });
    }

    // 页面加载时更新用户信息（原有逻辑不变）
    window.onload = function() {
        fetchUserData();
        fetchDefaultAddress();
    };
</script>

<!-- 原有脚本引入顺序不变 -->
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/top.js"></script>

<script>
    new Vue({
        el: "#app",
        async created() {
            util.store.set("return-url", location.href);
            this.user = util.store.get("user-info")
            if (!util.isLogin()) {
                // 未登录直接跳转到登录页面
                location.href = "login.html"
            }
            // 加载购物车
            this.fetchUserData();
        },
    });
</script>
</body>
</html>